$(function() {

	/**********************加载数据并创建文本节点************************************************************************/
	//创建左侧标题
	$.get("../commodity-json/title.json", function(data) {
			//		console.log(data)
			//for循环判断加载几个项
			var tit = data
			for (var i = 0; i < tit.length; i++) {
				//创建大盒子节点
				var div = $('<div class="xang"></div>')
					//创建标题
				var biaoti = data[i]["biaoti"]
					//			console.log(biaoti)
					//创建装载 标题盒子
				var h4 = $('<h4></h4>')
				h4.html('<a href="' + biaoti["menuTarge"] + '">' + biaoti['p'] + '</a>')
					//放到大盒子中
				div.append(h4)
					/*****创建信息载体************/
				var ul = $('<ul></ul>')
					//循环创建信息
				var xx = data[i]["xinxi"]
				for (var k = 0; k < xx.length; k++) {
					//					console.log(xx[k])
					//创建节点
					var li = $('<li></li>')
					li.html('<li><a href="' + xx[k]["menuTarge"] + '">' + xx[k]["p"] + '</a></li>')
						//将li 放入父节点中
					ul.append(li)
				}
				//将 ul 放入div中
				div.append(ul);
				//将div 放入 文本中
				$('.l-box').append(div)
			}
			//节点加载完成后创建事件
			//创建事件  移入变色
			$(".xang").each(function() {
				$(this).find("ul a").hover(function() {
					$(this).css({
						color: "red"
					})
				}, function() {
					$(this).css({
						color: "black"
					})
				})
			})
		})
		/***************************创建商品加载列表***************************************************/
	$.get("../commodity-json/commodity1.json", function(data) {

		//获取后循环判断创建的个数
		for (var i = 0; i < data.length; i++) {
//			console.log(data[i])
				//每个项
			var xang = data[i];
			//创建节点 大盒子
			var div = $('<div class="lei"></div>')
				//创建装载图片加导航盒子
			var indiv = $('<div class="i-n"></div>')
				//为i-n添加pid
			indiv.attr("pid", xang["pid"])
				//图片导航盒子存在两个盒子
			var idiv = $('<div class="i-box"></div>')
				//储存图片信息
			var im = xang["img"]
			for (var k = 0; k < im.length; k++) {
				//创建节点
				if (k == 0) {
					var span = $('<span class="span-active"></span>')
				} else {
					var span = $('<span></span>')
				}
				//创建信息
				span.html(' <img src="' + im[k]["p"] + '" /> ')
				idiv.append(span);
			}
			indiv.append(idiv);
			var ndiv = $('<div class="n-nav"></div>')
				//存放导航
			var na = xang["nav"];
			for (var j = 0; j < na.length; j++) {
				var ii = $('<i></i>');
				ii.html(' <img src="' + na[j]["p"] + '" /> ')
				ndiv.append(ii);
			}
			indiv.append(ndiv);
			//将盒子放入大盒子中
			div.append(indiv);
			/***************创建盒子装载详情***********************/
			var xbox = $('<div class="x-box"></div>')
				//创建介绍 盒子
			var js = $('<div class="jieshao"></div>')
				//创建其内部节点
			var jieshao = xang["jieshao"]
			var p = $('<p></p>')
			p.html(jieshao)
			js.append(p);
			xbox.append(js);

			var qia = $('<div class="qian"></div>')
			var qian = xang["pic"]
			var p = $('<p></p>')
			p.html(qian)
			qia.append(p);
			xbox.append(qia);
			div.append(xbox)
				//放入文本中
			$(".list-sp").append(div)

		}
		/****************全部加载完成后执行事件*************************/
		/**************************创建移入商品事件*********************************************/
		//思路移入lei触发事件
		$(".list-sp .lei").hover(function() {
			$(this).addClass("lei-active").siblings(".lei").removeClass("lei-active")
		}, function() {
			$(this).removeClass("lei-active")
		})

		//移入小导航效果
		$(".list-sp .lei").each(function() {
			//获取到小导航 使用委托
			$(this).on("mouseover", ".n-nav i", function() {
				//改变该节点样式
				$(this).addClass("i-active").siblings("i").removeClass("i-active")
					//获取其下标
				var inde = $(this).index();
				//改变上部大图显示
				$(this).parents(".i-n").find(".i-box span").eq(inde).css({
					display: "block"
				}).siblings("span").css({
					display: "none"
				})
			})
		})

		$(".lei ").each(function() {
			$(this).on("click", ".i-n", function() {
				var pid = $(this).attr("pid");
				location.href = "pro_center.php?pid=" + pid;
				//			alert(pid)
			})
		})
	})

	/***********************上导航跟随事件**********************************/
	$(window).scroll(function() {
			//获取当前鼠标距离上方距离
			var top = $(window).scrollTop();
			if (top > 0) {
				$("#box1").css({
					position: "fixed",
					top: 0
				})
			} else {
				$("#box1").css({
					position: ""
				})
			}

		})
		//上传商品编号

})

alert("只有前5个有商品详情链接")
